<template>
    <layout title="报修详情">
        <button-tab v-model="tabIndex">
            <button-tab-item>报修信息</button-tab-item>
            <button-tab-item>流程记录</button-tab-item>
            <button-tab-item>签到记录</button-tab-item>
        </button-tab>
        <div v-show="tabIndex == 0">
            <group title="报修信息">
                <cell-form-preview :border-intent="false" :list="repairInfo"></cell-form-preview>
                <attachment :files.sync="form.files1" :disabled="true"></attachment>
            </group>

            <group v-if="form.status == 3" title="人员分配">
                <cell-form-preview :border-intent="false" :list="personInfo"></cell-form-preview>
            </group>

            <group v-if="form.status == 4" title="处理信息">
                <cell-form-preview :border-intent="false" :list="resultInfo"></cell-form-preview>
                <attachment :files.sync="form.files2" :disabled="true"></attachment>
            </group>

            <group v-if="form.status == 5" title="评价信息">
                <cell title="满意度" disabled>
                    <rater v-model="form.eval_score" slot="value" :disabled="true"></rater>
                </cell>
                <cell-form-preview :border-intent="false" :list="evalInfo"></cell-form-preview>
            </group>
        </div>
        <div v-show="tabIndex == 1">
            <timeline>
                <timeline-item v-for="(item, index) in workflow">
                    <h4 class="{ index === 0 : 'recent'} "> {{ item.username }}</h4>
                    <p v-for="content in item.content" class="{ index == 0 : 'recent'} "> {{ content }}</p>
                    <p class="{ index == 0 : 'recent'} "> {{ item.time | time_format }}</p>
                </timeline-item>
            </timeline>
        </div>
        <div v-show="tabIndex == 2">
            <timeline>
                <timeline-item v-for="(item, index) in sign">
                    <h4 class="{ index == 0 : 'recent'} "> {{ item.label }}</h4>
                    <p class="{ index == 0 : 'recent'} "> {{ item.value }}</p>
                </timeline-item>
            </timeline>
        </div>
    </layout>

</template>
<script>
    import { ButtonTab, ButtonTabItem, Divider, Group, Cell, CellFormPreview, Rater, Timeline, TimelineItem } from 'vux'
    import Layout from './Layout.vue'
    import { repair as api } from '../api'
    import { mapGetters } from 'vuex'
    import Attachment from './Attachment'
    import moment from 'moment'

    export default {
        name: 'repair-info',
        components: {
            ButtonTab,
            ButtonTabItem,
            Divider,
            Layout,
            Group,
            Cell,
            CellFormPreview,
            Attachment,
            Rater,
            Timeline,
            TimelineItem,
        },
        computed: {
            ...mapGetters(['dicObj'])
        },
        data() {
            return {
                tabIndex: 0,
                id: null,
                repairInfo: [],
                personInfo: [],
                resultInfo: [],
                evalInfo: [],
                workflow: [],
                sign: [],
                form: {
                    endTime: null,
                    device_name: '',
                    type: '',
                    content: null,
                    is_expired: 0,
                    customer_name: null,
                    customer_tel: null,
                    customer_address: null,
                    amount: null,
                    fact_amount: null,
                    do_remark: null,
                    do_person_id: null,
                    do_person_name: null,
                    eval_content: null,
                    eval_score: 0,
                    result: null,
                    reason: null,
                    files1: null,
                    files2: null
                },
            }
        },
        methods: {
            async getSign() {
                this.sign = []
                //读取签到记录

                let ret = await api.getSign({
                    attributes: ['address', 'created_at'],
                    order: [
                        ["created_at", "ASC"]
                    ],
                    where: {
                        repair_id: this.id,
                    }
                })
                if (!ret.data) return

                for (let item of ret.data) {
                    this.sign.push({ label: item.address, value: moment(item.created_at).format('YYYY-MM-DD HH:mm:ss') })
                }
            },
            async getData() {
                //获取数据
                let ret = await api.detail({ id: this.id })
                let data = ret.data
                this.repairInfo.push(
                    { label: '设备名称', value: data.device_name },
                    { label: '故障类型', value: this.dicObj[data.type] },
                    { label: '故障描述', value: data.content },
                    { label: '客户姓名', value: data.customer_name },
                    { label: '联系方式', value: data.customer_tel },
                    { label: '客户地址', value: data.customer_address },
                    { label: '是否过保', value: this.dicObj[data.is_expired] },
                )
                this.personInfo.push(
                    { label: '技术员', value: data.do_person_name },
                    { label: '预计费用', value: data.amount },
                    { label: '备注', value: data.do_remark },
                )
                this.resultInfo.push(
                    { label: '处理结果', value: this.dicObj[data.result] },
                    { label: '故障原因', value: data.reason },
                    { label: '实际费用', value: data.fact_amount },
                )
                this.evalInfo.push(
                    { label: '备注', value: data.eval_content }
                )
                this.form = data
            },
            async getWorkflow() {
                this.workflow = []

                let ret = await api.getWorkflow({id: this.id})
                if (!ret.data) return
                this.workflow = ret.data
            }
        },
        async mounted() {
            this.id = this.$route.query.id
            if (!this.id) {
                return
            }
            await this.getData()
            await this.getSign()
            await this.getWorkflow()
            this.$store.commit('showBack', true)
        }
    }

</script>
<style scoped>
    p {
        color: #888!important;
        font-size: 0.8rem!important;
    }

    h4 {
        color: #666!important;
        font-weight: normal!important;
    }

    .recent {
        color: rgb(4, 190, 2)!important
    }

</style>
